<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <!-- <a-form-item label="相似度">
              <a-select
                style="width: 100px"
                placeholder="请选择相似度"
                v-model="simRate"
                allow-clear
              >
                <a-select-option
                  :value="item"
                  v-for="item in simList"
                  :key="item"
                >
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-item> -->
             <a-form-item label="图案名称">
                <a-input placeholder="请输入" v-model="patternName"/>
            </a-form-item>
            <a-form-item label="图案编码">
                <a-input placeholder="请输入" v-model="patternCode"/>
            </a-form-item>
            <a-form-item label="图片">
              <a-upload
                style="display:flex"
                action="https://jic.jnby.com/activity/market-act/common/upload/multipart"
                list-type="picture"
                maxCount={1} 
                :default-file-list="fileList"
                class="upload-list-inline"
                :beforeUpload="beforeUpload"
                :remove="handleCancel"
                @change="handleChange"
              >
                <a-button style="margin-top: 5px;">
                  <a-icon type="upload" /> 上传
                </a-button>
              </a-upload>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-collapse default-active-key="1">
        <a-collapse-panel
          key="1"
          header="元素"
        >
          <div class="list-content">
            <div class="ant-pro-pages-list-projects-cardList">
              <a-list
                :loading="loading"
                :data-source="element"
                :grid="{ gutter: 0 }"
              >
                <a-list-item
                  slot="renderItem"
                  slot-scope="item"
                >
                  <a-card
                    style="cursor: pointer"
                    :id="item.id"
                    class="ant-pro-pages-list-projects-card"
                    hoverable
                  >
                    <img
                      slot="cover"
                      :src="item.url ? item.url  : 'https://img.bzhz.jnbygroup.com/cloth.png'"
                      :alt="item.url"
                    />
                    <div class="cardItemContent">
                      <h3>元素编号:{{ item.code }}</h3>
                      <p class="price">差异值:{{ item.simRate }}</p>
                    </div>
                  </a-card>
                </a-list-item>
              </a-list>
            </div>
          </div>

        </a-collapse-panel>
      </a-collapse>
       <a-collapse default-active-key="1" style="margin-top:10px">
        <a-collapse-panel
          key="1"
          header="图案"
        >
          <div class="list-content">
            <div class="ant-pro-pages-list-projects-cardList">
              <a-list
                :loading="loading"
                :data-source="pattern"
                :grid="{ gutter: 0 }"
              >
                <a-list-item
                  slot="renderItem"
                  slot-scope="item"
                >
                  <a-card
                    style="cursor: pointer"
                    :id="item.id"
                    @click="toDetail(item.code)"
                    class="ant-pro-pages-list-projects-card"
                    hoverable
                  >
                    <img
                      slot="cover"
                      :src="item.url ? item.url  : 'https://img.bzhz.jnbygroup.com/cloth.png'"
                      :alt="item.url"
                    />
                    <div class="cardItemContent">
                      <h3>图案编号:{{ item.code }}</h3>
                      <p class="price">图案颜色:{{ item.color }}</p>
                      <p class="price">图案版本:{{ item.edition }}</p>
                      <p class="price">差异值:{{ item.simRate }}</p>
                    </div>
                  </a-card>
                </a-list-item>
              </a-list>
            </div>
          </div>

        </a-collapse-panel>
      </a-collapse>
    </a-card>
     <detailInfo
        v-if="showDetail"
        :patternCode="patternCode"
        @close="close"
      ></detailInfo>
  </div>
</template>

<script>
import { axios } from '@/utils/request'
import detailInfo from "./detail.vue";
const simList = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]

export default {
   components: {
    detailInfo
  },
  data() {
    return {
      form: this.$form.createForm(this),
      loading: false,
      showDetail:false,
      fileList: [],
      element: [],
      patternName:'',
      patternCode:'',
      pattern: [],
      activeKey: ['1'],
      simRate: 0.5,
      simList,
      imageUrl: ''
    }
  },
  mounted() {},

  methods: {
    handleSubmit(e) {
      e.preventDefault()
      // if (!this.imageUrl) {
      //   this.$message.error('请选择图片！')
      // } else {
      //   this.loading = true
      //   this.loadData()
      // }
      this.loading = true
        this.loadData()
    },
    beforeUpload(file, fileList) {
      this.imageUrl = file
      console.log();
    },
     handleChange(info) {
        if(info.fileList.length>1){
            this.$message.error("请删除一个图片！")
        }
    },
    close(){
      this.showDetail =false
    },
    toDetail(patternCode){
      this.showDetail = true
      this.patternCode = patternCode
    },
    handleCancel(){
      this.imageUrl = ''
    },
    loadData() {
      this.element = []
      this.pattern = []
      const formData = new FormData()
      if(this.imageUrl){
        formData.append('file', this.imageUrl)
      }
      formData.append('patternName', this.patternName)
      formData.append('patternCode', this.patternCode)
      const apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
      console.log(apiBaseUrl);
      try {
        axios({
          url: apiBaseUrl + '/api/gateway/imagemanage-center/search/image',
          method: 'post',
          data: formData,
          contentType: false
          // headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq' }
        }).then(res => {
          if (res.code == 200) {
            this.element = res.data.element
            this.pattern = res.data.pattern
            this.loading = false
          } else {
            this.loading = false
            this.$message.error(res.msg || res.message)
          }
        })
      } catch (error) {
        this.loading = false
      }finally{
        this.loading = false

      }
    }
  }
}
</script>
<style scoped lang="less">
@import './less/index.less';
</style>
<style scoped>
.upload-list-inline >>> .ant-upload-list-item {
  width: 200px;
  top: -8px;
  margin-left: 8px;
}
.background {
  background: transparent;
}
.ant-modal-body {
  display: flex;
  justify-content: space-between;
}
</style>